<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <style>
        .lottery { position: relative; display: inline-block;}
        .lottery img { position: absolute; top: 50%; left: 50%; margin-left: -76px; margin-top: -82px; cursor: pointer; }
    </style>
</head>
<body>
<div class="lottery">
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
        当前浏览器版本过低，请使用其他浏览器尝试
    </canvas>
    <img src="./images/start.png" id="start">
</div>
<script src="https://www.changyou.com/cdn/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.changyou.com/cdn/1.0/turntable.js"></script>
<script>
    // 初始化装盘数据 正常情况下应该由后台返回
    var initData = [
        {"id": 100, "name": "5000元京东卡", "image": "./images/1.png", "rank":1, "percent":20},
        {"id": 101, "name": "1000元京东卡", "image": "./images/2.png", "rank":2, "percent":20},
        {"id": 102, "name": "100个比特币", "image": "./images/3.png", "rank":3, "percent":10},
        {"id": 103, "name": "50元话费", "image": "./images/4.png", "rank":4, "percent":10},
        {"id": 104, "name": "100元话费", "image": "./images/5.png", "rank":5, "percent":10},
        {"id": 105, "name": "500个比特币", "image": "./images/6.png", "rank":6, "percent":10},
        {"id": 106, "name": "500元京东卡", "image": "./images/7.png", "rank":7, "percent":20}
    ];
    var angel = 360 / initData.length;
    var throttle = true;
    // 自定义转盘奖品
    var wheelSurf = $('#myCanvas').WheelSurf({
        list: initData, // 奖品 列表，(必填)
        outerCircle: {
            color: '#df1e15' // 外圈颜色(可选)
        },
        innerCircle: {
            color: '#f4ad26' // 里圈颜色(可选)
        },
        dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
        disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
        title: {
            color: '#5c1e08',
            font: '19px Arial'
        } // 奖品标题样式(可选)
    });
    // 初始化转盘
    wheelSurf.init();
    // 抽奖
    $("#start").on('click', function () {
        if(!throttle) return false;
        throttle = false;
        var winData = getGift(); // 正常情况下获奖信息应该由后台返回
        var count = 0;
        // 计算奖品角度
        for (var key in initData) {
            if (initData.hasOwnProperty(key)) {
                if (winData.id == initData[key].id) {
                    break;
                }
                count++
            }
        }
        // 转盘抽奖，
        wheelSurf.lottery((count * angel + angel / 2), function () {
            alert(winData.name);
            throttle = true;
        })
    });
    // 计算分配获奖概率(前提所有奖品概率相加100%，前端模拟接口)
    function getGift(){
        var percent = Math.random() * 100;
        var totalPercent = 0;
        for(var i = 0 ;i < initData.length; i++){
            totalPercent += initData[i].percent;
            if(percent <= totalPercent){
                return initData[i]
            }
        }
    }
</script>
</body>
</html>